import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Divider, Table, Badge, Icon, List, Row, Col, Timeline } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './StudentDetail.less';

const { Description } = DescriptionList;

// 所属专业
const specialities = {
  ch: '测绘工程专业',
  yg: '遥感科学与技术专业',
  zh: '自然地理与资源环境专业',
  cx: '人文地理与城乡规划专业',
  dx: '地理信息科学专业',
  tg: '土地资源管理专业',
};

// 政治面貌
const politicalOutlooks = {
  partyMember: '中共党员',
  probationaryPartyMember: '中共预备党员',
  LeagueMember: '共青团员',
  masses: '群众',
};

// const progressColumns = [
//   {
//     title: '时间',
//     dataIndex: 'createdIndex',
//     key: 'createdIndex',
//   },
// ];

const operationColumns = [
  {
    title: '操作类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '操作人',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '执行结果',
    dataIndex: 'status',
    key: 'status',
    render: text =>
      text === 'agree' ? (
        <Badge status="success" text="成功" />
      ) : (
        <Badge status="error" text="驳回" />
      ),
  },
  {
    title: '操作时间',
    dataIndex: 'updatedAt',
    key: 'updatedAt',
  },
  {
    title: '备注',
    dataIndex: 'memo',
    key: 'memo',
  },
];

// 操作日志
const operationTabList = [
  {
    key: 'tab1',
    tab: '操作日志一',
  },
  {
    key: 'tab2',
    tab: '操作日志二',
  },
  {
    key: 'tab3',
    tab: '操作日志三',
  },
];

@connect(({ students, loading }) => ({
  students,
  loading: loading.effects['students/fetchByKey'],
}))
class StudentDetail extends Component {
  state = {
    operationkey: 'tab1',
  };

  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;

    dispatch({
      type: 'students/fetchByKey',
      payload: params.key || '0',
    });
  }

  onOperationTabChange = key => {
    this.setState({ operationkey: key });
  };

  render() {
    const {
      students: { profile },
      loading,
    } = this.props;
    const { operationkey } = this.state;

    const Info = ({ title, value, bordered }) => (
      <div className={styles.headerInfo}>
        <span>{title}</span>
        <p>{value}</p>
        {bordered && <em />}
      </div>
    );

    return (
      <PageHeaderWrapper title={`学号：${profile.key}`} loading={loading}>
        <div className={styles.standardList}>
          <Card bordered={false} style={{ marginBottom: 24 }}>
            <Row>
              <Col sm={8} xs={24}>
                <Info title="绩点" value={profile.gpa} bordered />
              </Col>
              <Col sm={8} xs={24}>
                <Info title="素质扩展分" value={profile.qualityExpansion} bordered />
              </Col>
              <Col sm={8} xs={24}>
                <Info title="综合评定积分" value={profile.comprehensiveEvaluation} />
              </Col>
            </Row>
          </Card>
        </div>
        <Card bordered={false} style={{ marginBottom: 24 }}>
          <DescriptionList title="基本信息" size="large" style={{ marginBottom: 32 }}>
            <Description term="姓名">{profile.name}</Description>
            <Description term="性别">{profile.sex ? '男' : '女'}</Description>
            <Description term="年龄">{profile.age}</Description>
            <Description term="籍贯">{profile.nativePlace}</Description>
            <Description term="出生日期">{profile.birthDate}</Description>
            <Description term="政治面貌">{politicalOutlooks[profile.politicalOutlook]}</Description>
          </DescriptionList>

          <DescriptionList size="large" style={{ marginBottom: 32 }}>
            <Description term="学院">{profile.college}</Description>
            <Description term="年级">{profile.grade}</Description>
            <Description term="班级">{profile.classes}</Description>
            <Description term="专业">{specialities[profile.speciality]}</Description>
          </DescriptionList>

          <DescriptionList title="联系方式" size="large" style={{ marginBottom: 32 }}>
            <Description
              term={
                <>
                  <Icon type="phone" style={{ paddingRight: 5 }} />
                  手机号
                </>
              }
            >
              {profile.contactNumber}
            </Description>
            <Description
              term={
                <>
                  <Icon type="mail" style={{ paddingRight: 5 }} />
                  邮箱
                </>
              }
            >
              {profile.email}
            </Description>
            <Description
              term={
                <>
                  <Icon type="qq" style={{ paddingRight: 5 }} />
                  QQ
                </>
              }
            >
              {profile.qq}
            </Description>
            <Description
              term={
                <>
                  <Icon type="wechat" style={{ paddingRight: 5 }} />
                  微信
                </>
              }
            >
              {profile.wechat}
            </Description>
            <Description
              term={
                <>
                  <Icon type="environment" style={{ paddingRight: 5 }} />
                  通讯地址
                </>
              }
            >
              {profile.postalAddress}
            </Description>
          </DescriptionList>

          <Divider style={{ marginBottom: 32 }} />

          <DescriptionList size="large" title="学业成绩分" style={{ marginBottom: 32 }}>
            <Description term="课程成绩分">{profile.courseAchievementScore}</Description>
            <Description term="学习奖励分">{profile.academicAwardScore}</Description>

            {/* TODO: 插入表格 列出 各科学习成绩 */}
          </DescriptionList>

          <Divider style={{ marginBottom: 32 }} />

          <DescriptionList size="large" title="思想品德分" style={{ marginBottom: 32 }}>
            <Description term="思想品德基础分">{profile.moralEducationBasis}</Description>
            <Description term="学生互评分">{profile.matualEvaluation}</Description>
            <Description term="政治理论学习分">{profile.politicalTheory}</Description>
          </DescriptionList>

          <Divider style={{ marginBottom: 32 }} />

          <DescriptionList size="large" title="体育分" style={{ marginBottom: 32 }}>
            <Description term="国家学生体质健康标准">{profile.averageNsphs}</Description>
          </DescriptionList>

          <div className={styles.title}>历史成绩</div>
          <List
            grid={{ gutter: 16, column: 4 }}
            dataSource={profile.nsphs}
            renderItem={item => (
              <List.Item>
                <Card title={item.title}>{item.score}</Card>
              </List.Item>
            )}
          />

          <Divider style={{ marginBottom: 32 }} />

          <DescriptionList size="large" title="荣誉称号及活动获奖分" style={{ marginBottom: 32 }}>
            <Description term="各级各类荣誉称号加分">{profile.honoraryTitle}</Description>
            <Description term="第二课堂比赛活动获奖加分">{profile.secondClassroom}</Description>
            <Description term="其他加分">{profile.otherBonus}</Description>
          </DescriptionList>

          <Timeline mode="alternate">
            <Timeline.Item>科学素质知识竞赛二等奖 2015-12-01</Timeline.Item>
            <Timeline.Item color="green">财务决策大赛一等奖 2016-04-21</Timeline.Item>
            <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
              河南省注册会计师协会会长奖学金
            </Timeline.Item>
            <Timeline.Item color="red">全国大学生数学建模省级三等奖 2016-6-01</Timeline.Item>
            <Timeline.Item>安全类实践与创新作品大赛二等奖 2016-7-03</Timeline.Item>
            <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />}>
              河南省翻译竞赛二等奖 2016-11-11
            </Timeline.Item>
          </Timeline>
        </Card>

        {/* 操作日志 */}
        <Card
          className={styles.tabsCard}
          bordered={false}
          tabList={operationTabList}
          onTabChange={this.onOperationTabChange}
        >
          {profile.operations ? (
            <Table
              pagination={false}
              loading={loading}
              dataSource={profile.operations[operationkey]}
              columns={operationColumns}
            />
          ) : null}
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default StudentDetail;
